<!DOCTYPE html>
<html>

<head>
    <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: #f00;
      opacity: 1;
      transition: opacity .5s ease-in-out;
    }
    .box1:hover {
      opacity: 0;
    }
    


    .box2 {
        width: 200px;
        height: 200px;
        background-color: rgb(120, 205, 119);
        transition: transform .5s ease-in-out;
    }

    .box2:hover {
        transform: scale(1.5);
    }


    .box3 {
        width: 200px;
        height: 200px;
        background-color: #f00;
        transition: transform .5s ease-in-out;
    }

    .box3:hover {
        transform: rotate(720deg);
    }

    .box4 {
        width: 200px;
        height: 200px;
        background-color: rgb(50, 56, 166);
        transition: transform .5s ease-in-out;
    }

    .box4:hover {
        transform: translate(50px, 50px);
    }

    </style>
</head>

<body>
    <div style="display: flex;">
        <div class="box1">淡入淡出</div>
        <div class="box2">缩放</div>
        <div class="box3">旋转</div>
        <div class="box4">位移</div>
    </div>
</body>

</html>